<template>
  <div>
    <el-form class="searchForm" :model="searchForm" inline>
      <el-form-item prop="roleName">
        <el-input
          v-model="searchForm.roleName"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData" type="primary">查找</el-button>
        <el-button @click="openDialog('添加', 'add', null)" type="primary"
          >添加</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      border
    >
      <el-table-column label="用户ID" prop="roleId"></el-table-column>
      <el-table-column label="头像" prop="roleUrl"></el-table-column>
      <el-table-column label="用户名" prop="roleName"></el-table-column>
      <el-table-column label="用户角色" prop="role">
        <template slot-scope="scope">
          <el-tag>
            {{ scope.row["role"] | tableFilter(roleOptions) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            @click="openDialog('编辑', 'edit', scope.row)"
            type="primary"
            size="mini"
            >编辑</el-button
          >
          <el-button @click="deleteData(scope.row)" type="danger" size="mini"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      :before-close="handleClose"
      width="500"
    >
      <el-form
        ref="dialogForm"
        :rules="formRules"
        :model="dialogFormData"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="roleName">
          <el-input v-model="dialogFormData.roleName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="rolePassWord">
          <el-input v-model="dialogFormData.rolePassWord"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="roleUrl">
          <el-input v-model="dialogFormData.roleUrl"></el-input>
        </el-form-item>
        <el-form-item label="用户角色" prop="role">
          <template>
            <el-radio-group v-model="dialogFormData.role">
              <el-radio label="1">学生</el-radio>
              <el-radio label="2">教师</el-radio>
              <el-radio label="3">宿管</el-radio>
              <el-radio label="4">校领导</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="cancel">取消</el-button>
        <el-button @click="confirm" type="primary">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "usersList",
  componentTitle: "用户列表",
  data() {
    return {
      dialogVisible: false,
      dialogTitle: "添加",
      dialogType: "add",
      dialogFormData: {
        roleUrl: "",
        roleName: "",
        rolePassWord: "",
        role: "",
      },
      tableData: [],
      searchForm: {
        roleName: "",
      },
      roleOptions: [
        { label: "学生", value: "1" },
        { label: "教师", value: "2" },
        { label: "宿管", value: "3" },
        { label: "校领导", value: "4" },
      ],
      formRules: {
        roleName: [
          { required: true, message: "请输入用户名", trigger: "change" },
        ],
        rolePassWord: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
        role: [
          { required: true, message: "请输入用户角色", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.getData();
  },
  filters: {
    tableFilter(value, options) {
      let index = options.findIndex((item) => {
        return Number(item.value) === Number(value);
      });

      if (index < 0) {
        return "---";
      } else {
        return options[index].label;
      }
    },
  },
  methods: {
    openDialog(title, type, row) {
      this.dialogVisible = true;
      this.dialogType = type;
      this.dialogTitle = title;

      if (type === "edit") {
        this.$nextTick(() => {
          this.dialogFormData = Object.assign({}, row);
        });
      }
    },
    cancel() {
      this.dialogVisible = false;
      this.$refs.dialogForm.resetFields();
    },
    confirm() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          if (this.dialogType === "add") {
            this.addData();
          } else if (this.dialogType === "edit") {
            this.editData();
          }
        } else {
          return false;
        }
      });
    },
    getData() {
      axios({
        url: "http://127.0.0.1:3000/api/role/list",
        method: "get",
        params: {
          ...this.searchForm,
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
      });
    },
    addData() {
      axios({
        url: "http://127.0.0.1:3000/api/role/add",
        method: "post",
        data: {
          ...this.dialogFormData,
        },
      }).then((res) => {
        if (res.data.code === 200) {
          this.cancel();
          this.$notify.success({ title: "添加成功" });

          this.getData();
        } else {
          this.$notify.error({ title: "添加失败" });
        }
      });
    },
    editData() {
      axios({
        url: "http://127.0.0.1:3000/api/role/update",
        method: "put",
        data: {
          ...this.dialogFormData,
        },
      }).then((res) => {
        if (res.data.code === 200) {
          this.cancel();
          this.$notify.success({ title: "编辑成功" });

          this.getData();
        } else {
          this.$notify.error({ title: "编辑失败" });
        }
      });
    },
    deleteData(row) {
      this.$confirm("确定删除？").then(() => {
        axios({
          url: "http://127.0.0.1:3000/api/role/delete",
          method: "delete",
          params: row,
        }).then(() => {
          this.$notify.success({ title: "删除成功" });

          this.getData();
        });
      });
    },
    handleClose(done) {
      this.$confirm("确定关闭？")
        .then((_) => {
          console.log(_);
          done();
          this.cancel();
        })
        .catch((_) => {
          console.log(_);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.searchForm {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>